<% layout('/layouts/default.html', {title: '车辆详情管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> 编辑车辆图片
			</div>
		</div>
		<div class="box-body">
			<div class="form-unit">${text('图片信息')}</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="form-group">
						<label class="control-label col-sm-2 col-sm-9-1">
							<span class="required">*</span> ${text('封面照片')}：</label>
						<div class="col-sm-10 col-sm-9-8">
							<div class="custom-box">
								<div class="custom-center-title">
									<ul class="custom-ul" id="image"></ul>
									<div id="showBtn" class="custom-center">
										<i class="fa fa-image custom-icon"></i>
										<div class="custom-file">
											<span>点击选择图片</span>
											<input type="file" accept="image/*" class="cover-file" id="cover">
										</div>
										<span class="custom-tips">最多可选择 1 张图片呦~</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="form-group">
						<label class="control-label col-sm-2 col-sm-9-1">
							<span class="required">*</span> ${text('轮播图片')}：</label>
						<div class="col-sm-10 col-sm-9-8">
							<div class="custom-box">
								<div id="topTitle1" class="custom-title carousel hide">
									<div class="custom-count">最多可选择 4 张图片呦~</div>
									<div class="custom-add" id="topAdd1">
										<span>继续添加</span>
										<input type="file" accept="image/*" multiple class="cover-file" data-type="1">
									</div>
								</div>
								<div class="custom-center-title">
									<ul class="custom-ul" id="image1"></ul>
									<div id="showBtn1" class="custom-center">
										<i class="fa fa-image custom-icon"></i>
										<div class="custom-file">
											<span>点击选择图片</span>
											<input type="file" accept="image/*" multiple class="cover-file carousel">
										</div>
										<span class="custom-tips">最多可选择 4 张图片呦~</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="form-group">
						<label class="control-label col-sm-2 col-sm-9-1">
							<span class="required">*</span> ${text('详情图片')}：</label>
						<div class="col-sm-10 col-sm-9-8">
							<div class="custom-box">
								<div id="topTitle2" class="custom-title detail hide">
									<div class="custom-count">最多可选择 9 张图片呦~</div>
									<div class="custom-add" id="topAdd2">
										<span>继续添加</span>
										<input type="file" accept="image/*" multiple class="cover-file" data-type="1">
									</div>
								</div>
								<div class="custom-center-title">
									<ul class="custom-ul" id="image2"></ul>
									<div id="showBtn2" class="custom-center">
										<i class="fa fa-image custom-icon"></i>
										<div class="custom-file">
											<span>点击选择图片</span>
											<input type="file" accept="image/*" multiple class="cover-file detail">
										</div>
										<span class="custom-tips">最多可选择 9 张图片呦~</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box-footer">
			<div class="row">
				<div class="col-sm-offset-2 col-sm-10">
					<% if (hasPermi('car:car:edit')){ %>
						<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
					<% } %>
					<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
				</div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
	let imgList = [],imgList1 = [],imgList2 = [],deleteInfo={cover:[],carousel:[],detail:[]};
	//图片初始显示
	const car = JSON.parse('${toJson(car)}'),baseUrl='${baseUrl}';
	imgList = [{imageUrl:car.coverUrl}];
	imgList1 = car.carousel || [];
	imgList2 = car.detail || [];
	imgShow(0,imgList);
	imgShow(1,imgList1);
	imgShow(2,imgList2);
	// 上传图片
	$('#cover').on('change',function (e) {
		let img = e.target.files;
		const fix = (new Date()).getTime();
		for(let i=0;i<img.length;i++) {
			const name = (img[i].name).split('.');
			const file = new File([img[i]], 'cover_' + (fix+i) + '.' + name[1]);
			file.imgType='new';
			imgList=imgList.concat(file);
		}
		imgShow(0,imgList);
	});
	$('.carousel').on('change',function (e) {
		let img = e.target.files;
		const fix = (new Date()).getTime();
		for(let i=0;i<img.length;i++) {
			if(imgList1.length>3){
				break;
			}
			const name = (img[i].name).split('.');
			const file = new File([img[i]], 'carousel_' + (fix+i) + '.' + name[1]);
			file.imgType='new';
			imgList1=imgList1.concat(file);
		}
		imgShow(1,imgList1);
	});
	$('.detail').on('change',function (e) {
		let img = e.target.files;
		const fix = (new Date()).getTime();
		for(let i=0;i<img.length;i++) {
			if(imgList2.length>8){
				break;
			}
			const name = (img[i].name).split('.');
			const file = new File([img[i]], 'detail_' + (fix+i) + '.' + name[1]);
			file.imgType='new';
			imgList2=imgList2.concat(file);
		}
		imgShow(2,imgList2);
	});
	// 显示图片列表
	function imgShow(index,attr){
		let html = '';
		let windowURL = window.URL || window.webkitURL;
		for(let i =0;i<attr.length;i++) {
			if(attr[i].imgType){
				let dataURL = windowURL.createObjectURL(attr[i]);
				html +='<li class="custom-li">' +
						'<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
						'<div><img class="custom-img" src="'+dataURL+'"></div>' +
						'<div class="custom-load">等待上传</div>' +
						'</li>';
				windowURL.revokeObjectURL(attr[i]);
			}else {
				let dataURL = baseUrl+attr[i].imageUrl;
				html +='<li class="custom-li">' +
						'<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
						'<div><img class="custom-img" src="'+dataURL+'"></div>' +
						'<div class="custom-success">已上传</div>' +
						'</li>';
			}
		}
		if(index==0){
			if(attr.length>0){
				$('#showBtn').hide();
			}else{
				$('#showBtn').show();
			}
			$('#image').html(html);
		}
		if(index==1){
			if(attr.length>0){
				$('#showBtn1').hide();
				$('#topTitle1').removeClass("hide");
			}
			if(attr.length>3){
				$('#topAdd1').hide();
			}
			$('#image1').html(html);
		}
		if(index==2){
			if(attr.length>0){
				$('#showBtn2').hide();
				$('#topTitle2').removeClass("hide");
			}
			if(attr.length>8){
				$('#topAdd2').hide();
			}
			$('#image2').html(html);
		}
	}
	// 移除图片
	function removeImg(index,obj){
		js.confirm('确认删除该图片吗？', function(){
			if(index==0){
				$.each(imgList,(index)=>{
					if(index==obj){
						if(!imgList[obj].imgType){
							const img = imgList[obj].imageUrl.split("/");
							deleteInfo.cover.push(img[img.length-1])
						}
						imgList.splice(index,1);
					}
				});
				imgShow(0,imgList);
			}
			if(index==1){
				$.each(imgList1,(index)=>{
					if(index==obj){
						if(!imgList1[obj].imgType){
							const img = imgList1[obj].imageUrl.split("/");
							deleteInfo.carousel.push({
								id:imgList1[obj].imageId,
								name:img[img.length-1]
							})
						}
						imgList1.splice(index,1);
					}
				});
				imgShow(1,imgList1);
			}
			if(index==2){
				$.each(imgList2,(index)=>{
					if(index==obj){
						if(!imgList2[obj].imgType){
							const img = imgList2[obj].imageUrl.split("/");
							deleteInfo.detail.push({
								id:imgList2[obj].imageId,
								name:img[img.length-1]
							})
						}
						imgList2.splice(index,1);
					}
				});
				imgShow(2,imgList2);
			}
		});
	}
	// 保存
	$("#btnSubmit").click(()=>{
		if(imgList.length==0){
			js.showMessage('封面图片未上传！！');
			return;
		}
		if(imgList1.length==0){
			js.showMessage('轮播图片未上传！！');
			return;
		}
		if(imgList2.length==0){
			js.showMessage('详情图片未上传！！');
			return;
		}
		let paramsImg = new FormData();
		paramsImg.append("carId",car.carId);
		paramsImg.append("delCover",deleteInfo.cover.join(","));
		paramsImg.append("delCarousel",JSON.stringify(deleteInfo.carousel));
		paramsImg.append("delDetail",JSON.stringify(deleteInfo.detail));
		for(let i=0;i<imgList.length;i++){
			if(imgList[i].imgType){
				paramsImg.append('files',imgList[i]);
			}
		}
		for(let i=0;i<imgList1.length;i++){
			if(imgList1[i].imgType) {
				paramsImg.append('files', imgList1[i]);
			}
		}
		for(let i=0;i<imgList2.length;i++){
			if(imgList2[i].imgType){
				paramsImg.append('files',imgList2[i]);
			}
		}
		js.confirm('确认提交吗？', function(){
			$.ajax({
				url : '${ctx}/car/car/saveFormImg',
				type : 'POST',
				data : paramsImg,
				dataType : 'JSON',
				contentType:false,
				processData:false,
				mimeType:"multipart/form-data",
				success : function(data) {
					js.showMessage(data.message);
					if(data.result == 'true'){
						js.closeCurrentTabPage(function(contentWindow){
							contentWindow.page();
						});
					}
				}
			});
		});
	});


	function saveData(formData) {
		let data = {};
		$.each(formData, function(i, obj) {
			data[obj.name] = obj.value;
		});
		js.confirm('确认修改吗？', function(){
			$.ajax({
				url : '${ctx}/task/task/saveTask',
				type : 'POST',
				data : data,
				dataType : 'JSON',
				success : function(data) {
					js.showMessage(data.message);
					if(data.result == 'true'){
						js.closeCurrentTabPage(function(contentWindow){
							contentWindow.page();
						});
					}
				},
				error:function (err) {
					js.showErrorMessage(err.responseJSON.message);
				}
			});
		});
	}
</script>